<template>
  <div class=" publicBox" id="changepasswordCss">

<el-form ref="form" :model="ruleForm"  class="demo-form-inline publicEditFrom" :rules="rules" label-width="160px" label-position="left">

<el-row>
     <div class="pubPageTagP">
               <p>修改密码</p>
     </div>
</el-row>

<el-row>
         <el-form-item label="原密码" prop="oldpassword">
                 <el-input class="pubSerIpt"  v-model="ruleForm.oldpassword" v-if="!disabledFlag" placeholder="请输入账号原密码"></el-input>
                 <p v-else>{{ruleForm.oldpassword}}</p>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="新密码" prop="newpassword">
                 <el-input class="pubSerIpt" show-password v-model="ruleForm.newpassword" v-if="!disabledFlag" placeholder="请输入新密码，字母+数字，6-16位"></el-input>
                 <p v-else>{{ruleForm.newpassword}}</p>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="再次输入新密码" prop="againnewpassword">
                 <el-input class="pubSerIpt" show-password v-model.number="ruleForm.againnewpassword"  placeholder="请再次输入新密码"></el-input>
       </el-form-item>
</el-row>

<el-row class="pubSubmitBtn-row">
           <el-form-item>
                         <el-button class="pubBtnGree" type="primary" @click="submitForm">保存</el-button>
       </el-form-item>
</el-row>

</el-form>
    
  </div>
</template>

<script>

import * as API from '@api/system.js'
export default {
  components: {


  },
  data() {
    return {
     disabledFlag:false,
     RootOptions: [],
     ruleForm:{
      oldpassword:"",
      newpassword:"",
      againnewpassword:""
     },
      rules: {
          oldpassword: [
            {required: true, message: '请输入原密码', trigger: 'blur' }
          ],
          newpassword: [
            {required: true, message: '请输入新密码，字母+数字，6-16位', trigger: 'blur' },
          ],
          againnewpassword: [
            {required: true, message: '请输入再次输入新密码', trigger: 'blur' }
          ]
        }
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
       submitForm() {
           this.$refs["form"].validate((valid) => {
            if (valid) {
                   this.editPassword()
            } else {
              return false;
            }
        });
       },
      editPassword(){
         if(this.ruleForm.newpassword!=this.ruleForm.againnewpassword){
                       this.$message.warning({message:"新密码两次输入不一致"})
                    }else{
                       let params={
                               id:this.$store.state.toolslist.userId,
                               oldPwd:this.ruleForm.oldpassword.md4(),
                               newPwd:this.ruleForm.newpassword.md4()
                              }
                         API.editPassword(params).then(res=>{
                              if(res.IsPositive){
                                this.$message.success({message:"修改成功"})
                              }else{
                                this.$message.error({message:res.ErrorCode})
                              }
                         })
                    }
      }
  },
  created() {
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less'>


</style>